<template>
  <div class="post-processing-setting">
    <n-collapse arrow-placement="right" >
      <n-collapse-item  title="后期效果" name="post-processing" >
        <template #header-extra>
          <n-switch 
            v-model:value="config.enabled" 
            @update:value="handleEnabledChange"
            size="small"
          />
        </template>
        
        <div v-if="config.enabled" class="post-processing-content">
          <!-- 基础效果开关 -->
          <div class="effect-switches">
            <n-space vertical>
              <n-checkbox v-model:checked="config.sao.enabled" @update:checked="handleConfigChange">
                SAO
              </n-checkbox>
              <n-checkbox v-model:checked="config.fxaa.enabled" @update:checked="handleConfigChange">
                FXAA
              </n-checkbox>
              <n-checkbox v-model:checked="config.dof.enabled" @update:checked="handleConfigChange">
                景深
              </n-checkbox>
              <n-checkbox v-model:checked="config.bloom.enabled" @update:checked="handleConfigChange">
                全屏泛光
              </n-checkbox>
            </n-space>
          </div>
          <!-- SAO参数 -->
          <n-collapse-item title="SAO参数" name="sao" class="nested-collapse">
            <n-space vertical>
              <div class="slider-item">
                <n-text>强度</n-text>
                <n-slider
                  v-model:value="config.sao.intensity"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.sao.intensity"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
              <div class="slider-item">
                <n-text>扩散</n-text>
                <n-slider
                  v-model:value="config.sao.diffusion"
                  :min="0"
                  :max="100"
                  :step="1"
                  :format-tooltip="(value) => value.toFixed(0)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.sao.diffusion"
                  :min="0"
                  :max="100"
                  :step="1"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
            </n-space>
          </n-collapse-item>
          <!-- 全屏泛光 -->
          <n-collapse-item title="全屏泛光" name="bloom" class="nested-collapse">
            <n-space vertical>
              <div class="slider-item">
                <n-text>强度 </n-text>
                <n-slider
                  v-model:value="config.bloom.strength"
                  :min="0"
                  :max="10"
                  :step="0.1"
                  :format-tooltip="(value) => value.toFixed(1)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.bloom.strength"
                  :min="0"
                  :max="10"
                  :step="0.1"
                  :precision="1"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
              <div class="slider-item">
                <n-text>半径 </n-text>
                <n-slider
                  v-model:value="config.bloom.radius"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.bloom.radius"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
              <div class="slider-item">
                <n-text>阈值 </n-text>
                <n-slider
                  v-model:value="config.bloom.threshold"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.bloom.threshold"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
            </n-space>
          </n-collapse-item>
          <!-- 屏幕空间反射 -->
          <n-collapse-item title="屏幕空间反射" name="ssr" class="nested-collapse">
            <n-space vertical>
              <div class="slider-item">
                <n-text>强度</n-text>
                <n-slider
                  v-model:value="config.ssr.intensity"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.ssr.intensity"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
              <div class="slider-item">
                <n-text>距离</n-text>
                <n-slider
                  v-model:value="config.ssr.distance"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.ssr.distance"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
            </n-space>
          </n-collapse-item>
          <!-- 指定辉光 -->
          <n-collapse-item title="指定辉光" name="selective-bloom" class="nested-collapse">
            <n-space vertical>
              <div class="slider-item">
                <n-text>强度</n-text>
                <n-slider
                  v-model:value="config.selectiveBloom.intensity"
                  :min="0"
                  :max="10"
                  :step="0.1"
                  :format-tooltip="(value) => value.toFixed(1)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.selectiveBloom.intensity"
                  :min="0"
                  :max="10"
                  :step="0.1"
                  :precision="1"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
              <div class="slider-item">
                <n-text>半径</n-text>
                <n-slider
                  v-model:value="config.selectiveBloom.radius"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :format-tooltip="(value) => value.toFixed(2)"
                  @update:value="handleConfigChange"
                />
                <n-input-number
                  v-model:value="config.selectiveBloom.radius"
                  :min="0"
                  :max="1"
                  :step="0.1"
                  :precision="2"
                  size="small"
                  style="width: 80px"
                  @update:value="handleConfigChange"
                />
              </div>
            </n-space>
          </n-collapse-item>
          
        </div>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { createDefaultPostProcessingConfig, ensurePostProcessingConfig } from '@/settings/postProcessingDefault'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { NCollapse, NCollapseItem, NSwitch, NCheckbox, NSlider, NInputNumber, NText, NSpace } from 'naive-ui'

const chartEditStore = useChartEditStore()

// 响应式配置
const config = reactive(createDefaultPostProcessingConfig())

// 防抖更新
let updateTimer: NodeJS.Timeout | null = null

// 更新配置到 store
const updateConfig = () => {
  chartEditStore.updatePostProcessingConfig(config)
}

// 处理配置变化
const handleConfigChange = () => {
  if (updateTimer) {
    clearTimeout(updateTimer)
  }
  updateTimer = setTimeout(() => {
    updateConfig()
  }, 100) // 100ms 防抖
}

// 处理总开关变化
const handleEnabledChange = (value: boolean) => {
  config.enabled = value
  updateConfig()
}

// 从 store 加载配置
const loadConfig = () => {
  const storeConfig = ensurePostProcessingConfig(chartEditStore.editCanvasConfig.postProcessing)
  Object.assign(config, storeConfig)
}

// 监听 store 变化
watch(
  () => chartEditStore.editCanvasConfig.postProcessing,
  (newConfig) => {
    if (newConfig) {
      Object.assign(config, newConfig)
    }
  },
  { deep: true }
)

onMounted(() => {
  loadConfig()
})
</script>

<style scoped>
.post-processing-setting {
  margin-top: 16px;
}

.post-processing-content {
  margin-top: 12px;
}

.effect-switches {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--n-color-target);
  border-radius: 6px;
}

.nested-collapse {
  margin-top: 8px;
}

.slider-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.slider-item .n-text {
  min-width: 40px;
  font-size: 12px;
}

.slider-item .n-slider {
  flex: 1;
}

.slider-item .n-input-number {
  flex-shrink: 0;
}
</style>
